<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作用域与作用域链</title>
</head>
<body>
    
<!-- 
    1. 理解
        - 就是一块'地盘'，一个代码段所在的区域
        - 他是静态的（相对与上下文对象），再编写代码时就确定了
    2. 分类
        - 全局作用域
        - 函数作用域
        - 没有块作用域（ES6 有了）
    3. 作用
        - 隔离变量，不同作用域下同名变量不会有冲突 ⭐

 -->

<script type="text/javascript">

/*  没有块作用域  后面补充  
    if(true){
        var c = 3
    }
*/

    var a = 10,
    b = 20
    function fn(x){
        var a = 100,
        c = 300;
        console.log('fn()',a,b,c,x)  //  fn() 100 20 300 10
        function bar (x){
            var a = 1000,
            d = 400
            console.log('bar()',a,b,c,d,x) // 提示，函数被调用的时候才会被执行

        }
        bar(100)   // bar() 1000 20 300 400 100
        bar(200)    // bar() 1000 20 300 400 200
    }
    fn(10)

</script>
</body>
</html>